<template>



	<view class="u-page">

		<div style="position: relative;height: 300rpx;">


			<view class="jianbian">

			</view>

			<div class="shouye">
				<!-- 搜索框 -->
				<view class="u-demo-block">
					<view class="u-demo-block__content">
						<div class="div4">
							<div class="dv">
								<u--input placeholder="搜索车型" prefixIcon="search" class="search-input"
									prefixIconStyle="font-size: 50rpx;color: #909399"></u--input>
								<view>
									<div class="other-icon">
										<img src="../../static/maiche/lingdang.png" style="height: 40rpx;width: 100%;"
											alt="Other Icon">
									</div>
								</view>

							</div>
						</div>
					</view>
				</view>


				<!-- 轮播图 -->
				<view>
					<div class="div5">
						<u-swiper :list="list5" @change="e => current = e.current" :autoplay="true" :interval="3000"
							:height="swiperHeight">
							<view slot="indicator" class="indicator">
								<view class="indicator__dot" v-for="(item, index) in list5" :key="index"
									:class="[index === current && 'indicator__dot--active']">
								</view>
							</view>
						</u-swiper>

					</div>
				</view>



			</div>




		</div>

		<!-- 菜单功能图标 -->
		<view class="tu1">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="40"
						@tap="goStoreDetails(listIndex)" width="100rpx"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>

		<!-- 线条 -->
		<div style="margin-top: 15rpx;">
			<view>
				<hr size=5 style="background-color:gainsboro;border: none;">
			</view>
		</div>


		<div class="picker-maiche">
			<u-row justify="space-between" gutter="8">
				<u-col span="3">
					<view>
						<view>
							<u-picker :show="show" :columns="columns" @cancel="pickerCancel()" @confirm="onfirm()"
								@change="onPickerChange">
							</u-picker>
							<view class="picker" @click="show = true">
								<u-icon class="picker-icon" :label="selected" labelPos="left" size="12rpx"
									name="arrow-down"></u-icon>
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="3">
					<view style="margin-left: 30rpx">
						<view>
							<u-picker :show="show1" :columns="columns1" @cancel="pickerCancel1()" @confirm="onfirm1()"
								@change="onPickerChange1">
							</u-picker>
							<view class="picker" @click="show1 = true">
								<u-icon class="picker-icon" :label="selected1" labelPos="left" size="12rpx"
									name="arrow-down"></u-icon>
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="3">
					<view style="margin-left: 20rpx">
						<view>
							<u-picker :show="show2" :columns="columns2" @cancel="pickerCancel2()" @confirm="onfirm2()"
								@change="onPickerChange2">
							</u-picker>
							<view class="picker" @click="show2 = true">
								<u-icon class="picker-icon" :label="selected2" labelPos="left" size="12rpx"
									name="arrow-down"></u-icon>
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="3">
					<view style="margin-left: 30rpx">
						<view>
							<u-picker :show="show3" :columns="columns3" @cancel="pickerCancel3()" @confirm="onfirm3()"
								@change="onPickerChange3">
							</u-picker>
							<view class="picker" @click="show3 = true">
								<u-icon class="picker-icon" :label="selected3" labelPos="left" size="12rpx"
									name="arrow-down"></u-icon>
							</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</div>

		<!-- 线条 -->
		<div style="margin-top: 20rpx;">
			<view>
				<u-line></u-line>
			</view>
		</div>


		<!-- 滑块列表 -->
		<div class="picker-maiche">
			<u-scroll-list :indicator="indicator" @right="right" @left="left">
				<view class="scroll-list" style="flex-direction: row;">
					<view class="scroll-list__goods-item" v-for="(item, index) in list1" :key="index">
						<div class="huache">
							<image class="scroll-list__goods-item__image" :src="item.thumb"></image>
							<div class="huachewenzi">
								<text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
							</div>

						</div>
					</view>
					<view class="scroll-list__show-more">
						<text class="scroll-list__show-more__text">查看更多</text>
						<u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
					</view>
				</view>
			</u-scroll-list>
		</div>


		<!--		下拉列表-->
		<div class="picker-maiche">
			<view class="u-page">
				<u-list @scrolltolower="scrolltolower" height="600rpx">
					<u-list-item v-for="(item, index) in urls" :key="index" style="margin-top: 20rpx">
						<div @tap="gonavigate">
							<u-row gutter="10">
								<u-col span="5">
									<view style="height: 180rpx;">
										<!--									<image style="width: 100%; height: 220rpx;border-radius: 18rpx" :src="item.url"></image>-->
										<u--image  radius="18" height="80" width="120" :src="item.url"></u--image>
									</view>
								</u-col>
								<u-col span="7">
									<view style="height: 180rpx;margin-left: 10rpx">
										<view class="demo-layout" style="margin-top: 10rpx">
											<u-text   :text="item.wenTitle" size="14"></u-text>
										</view>

										<view class="demo-layout" style="margin-top: 15rpx;">
											<u-text :text="item.ban"  size="14"></u-text>
										</view>

										<view class="demo-layout" style="margin-top: 20rpx;">
											<u-text :text="item.zhidao" type="info" size="11rpx"></u-text>
										</view>

										<view class="demo-layout" style="margin-top: 20rpx;">
											<u-text :text="item.shoufu"  size="12" color="#FF0000"></u-text>
										</view>
									</view>


								</u-col>

							</u-row>
						</div>


					</u-list-item>
				</u-list>
			</view>
		</div>

		<!--加载更多-->
		<div class="shouye">

			<div class="dibu">
				<div>
					<div v-for="(item, index) in list2" :key="index">{{ item }}</div>
					<div v-if="loading" class="loading">加载中...</div>
					<div v-else-if="hasMore" class="load-more" @click="loadMore">点击加载更多</div>
					<div v-else class="no-more">没有更多了</div>
				</div>
			</div>

		</div>

	</view>

</template>

<script>
	export default {

		data() {
			return {
				title: "自定义头部",
				bgColor: "linear-gradient(to right, #000000, #ffffff)",
				current: 0,
				swiperHeight: "290rpx",
				list2: [],
				page: 1, // 页码
				pageSize: 10, // 每页条数
				loading: false, // 是否正在加载
				hasMore: true, // 是否还有更多
				list5: [
					'../../static/icon/banner.jpg',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				list: [{
						name: '../../static/maiche/buyCar_picture1.png',
						title: '超值好车'
					},
					{
						name: '../../static/maiche/buyCar_picture2.png',
						title: 'VR看车'
					},
					{
						name: '../../static/maiche/buyCar_picture3.png',
						title: '热销SUV'
					},
					{
						name: '../../static/maiche/buyCar_picture4.png',
						title: '计算器'
					}
				],
				columns: [
					['智能排序', '奔驰', '宝马', '奥迪']
				],
				columns1: [
					['品牌', '奔驰', '宝马', '奥迪']
				],
				columns2: [
					['车价', '10~20w', '21~30w', '30w以上']
				],
				columns3: [
					['筛选', '时间', '热销']
				],
				selected: '智能排序',
				selected1: '品牌',
				selected2: '车价',
				selected3: '筛选',
				pickerValue: '智能排序',
				pickerValue1: '品牌',
				pickerValue2: '车价',
				pickerValue3: '筛选',
				show: false,
				show1: false,
				show2: false,
				show3: false,
				list1: [{
					price: '三厢轿车',
					thumb: '../../static/maiche/buyCar1.png'
				}, {
					price: '两厢轿车',
					thumb: '../../static/maiche/buyCar2.png'
				}, {
					price: 'SUV',
					thumb: '../../static/maiche/buyCar3.png'
				}, {
					price: '林肯',
					thumb: '../../static/maiche/buyCar4.png'
				}, {
					price: '小型桥车',
					thumb: '../../static/maiche/buyCar5.png'
				}],
				indicator: false,
				indexList: [],
				// urls: [
				// 	'../../static/maiche/buyCar4.png',
				// 	'../../static/maiche/buyCar5.png'
				// ],
				urls: [{
						"wenTitle": "588ku 2019款 3.0T 自动",
						"ban": "天窗版",
						"zhidao": "厂商指导价：13.05万",
						"shoufu": "首付 5000元",
						"url": "../../static/maiche/buyCar4.png"
					},
					{
						"wenTitle": "588ku 2019款 3.0T 自动",
						"ban": "天窗版",
						"zhidao": "厂商指导价：13.05万",
						"shoufu": "首付 5000元",
						"url": "../../static/maiche/buyCar5.png"
					}
				]
			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			onChange(e) {
				this.selected = e.detail.value;
			},
			onPickerChange(e) {
				console.log(e, "111")
				this.pickerValue = e.value[0]
			},
			pickerCancel() {
				this.show = false
				this.pickerValue = ''
			},
			onfirm() {

				this.selected = this.pickerValue
				console.log(this.selected)
				this.show = false
			},
			onPickerChange1(e) {
				console.log(e, "111")
				this.pickerValue1 = e.value[0]
			},
			pickerCancel1() {
				this.show1 = false
				this.pickerValue1 = ''
			},
			onfirm1() {
				this.selected1 = this.pickerValue1
				this.show1 = false
			},
			onPickerChange2(e) {
				console.log(e, "111")
				this.pickerValue2 = e.value[0]
			},
			pickerCancel2() {
				this.show2 = false
				this.pickerValue2 = ''
			},
			onfirm2() {
				this.selected2 = this.pickerValue2
				this.show2 = false
			},
			onPickerChange3(e) {
				console.log(e, "111")
				this.pickerValue3 = e.value[0]
			},
			pickerCancel3() {
				this.show3 = false
				this.pickerValue3 = ''
			},
			onfirm3() {
				this.selected3 = this.pickerValue3
				this.show3 = false
			},
			left() {
				console.log('left');
			},
			right() {
				console.log('right');
			},
			scrolltolower() {
				this.loadmore()
			},
			loadMore() {
				if (this.loading || !this.hasMore) {
					return
				}
				this.loading = false
				setTimeout(() => {
					this.hasMore = false
				}, 2000)
				// 请求下一页数据
				// ...
			},
			loadmore() {
				// for (let i = 0; i < 2; i++) {
				// 	this.indexList.push({
				// 		url: this.urls[i]
				// 	})
				// }
			},
			gonavigate() {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/maiche/carDetail'
				})
			},
			goStoreDetails(index) {
				if (index == 0) {
					uni.navigateTo({
						//保留当前页面，跳转到应用内的某个页面
						url: '/pages/maiche/storeDetails'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-input {
		border-radius: 22rpx;
	}

	.header {
		height: 80px;
	}

	.arrow-down {
		width: 24rpx;
		height: 24rpx;
		margin-left: 10rpx;
		transform: rotate(180deg);
	}

	.picker {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		/*background-color: #f5f5f5;*/
		border-radius: 5px;
		width: 140rpx;
	}

  .indicator {
    @include flex(row);
    justify-content: center;

    &__dot {
      height: 4px;
      width: 4px;
      border-radius: 100px;
      background-color: rgba(255, 255, 255, 0.35);
      margin: 0 5px;
      transition: background-color 0.3s;

      &--active {
        background-color: #ffffff;
      }
    }
  }

	.picker-text {
		flex: 1;
		font-size: 11rpx;
	}


	.picker-icon {
		font-size: 10px;
		color: #888;
		transform: rotate(0deg);
		/* 将图标向下旋转 */
	}

	.scroll-list {
		@include flex(column);


		&__goods-item {
			margin-right: 17rpx;

			&__image {
				width: 88px;
				height: 32px;
				margin: auto 0;

			}

			// &__text {
			//     text-align: center;
			//     font-size: 12px;
			//     margin-top: 5px;
			// }
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}
</style>
